<template>
    <div class="all">
        <!-- 搜索框 -->
        <van-search
            v-model="value"
            shape="round"
            background="#fff"
            placeholder="请输入搜索关键词"
            disabled
            @click="showPopup()"
        />
        <!-- 搜索框/ -->
        <transition name="van-slide-right">
            <router-view></router-view>
        </transition>

        
        <div class="neirong" v-show="$route.path=='/type'">
            <div>
                 <!-- 侧边栏 -->
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item v-for="(item,index) in categoryList" :key="index"  :title="item.name" @click="dianji(item.id)"/>
                    <br><br><br><br>
                </van-sidebar>
          <!-- /侧边栏 -->
            </div>
           
            <div class="you">
                <div class="top">
                    <van-image
                        class="curr_ban"
                        :src="this.currentCategory.banner_url"
                        alt=""
                        width="100%"
                    />
                    <p class="curr_info">{{ this.currentCategory.front_name }}</p>
                </div>
                <div class="curr_midtitle">
                    <span></span>
                    <p class="curr_midtit">— {{ this.currentCategory.name }} —</p>
                  </div>
                  <div class="curr_bottom">
                    <van-grid :column-num="3">
                      <van-grid-item
                        v-for="item in subCategoryList"
                        :key="item.id"
                        :icon="item.wap_banner_url"
                        :text="item.name"
                      />
                    </van-grid>
                  </div>
            </div>
            
          <!-- 右侧 -->
          <!-- /右侧 -->
        </div>


        
    </div>
</template>

<script>
import {GetFenLei,GetXiFenLei} from "@/request/api.js"
export default {
    name: 'WorkspaceJsonType',

    data() {
        return {
            value:'',
            categoryList:[],
            activeKey:'',
            currentCategory:[],
            subCategoryList:[],
            id: "1005000",
        };
    },

    mounted() {
        
    },

    methods: {
        showPopup(){
            // console.log(123);
            // 完成路由跳转
            this.$router.push("/type/searchPopup")
        },
        dianji(v){
            GetXiFenLei({ id: v }).then((res) => {
            this.currentCategory = res.data.currentCategory;
            this.subCategoryList = res.data.currentCategory.subCategoryList;
      });
        }
    },
    created(){
        GetFenLei()
        .then(res=>{
            // console.log(res);
            this.categoryList=res.data.categoryList
            this.currentCategory=res.data.currentCategory
        })
        GetXiFenLei({id:this.id})
            .then(res=>{
                // console.log(res);
                
                this.currentCategory=res.data.currentCategory
                this.subCategoryList = res.data.currentCategory.subCategoryList;
            })
        
    }
};
</script>

<style lang="less" scoped>
.all{
    background-color: #fff;

}
.neirong{
    display: flex;
}

      
.top {
    text-align: center;
    
    
  }
  
  .curr_ban {
    height: 1.5rem;
    box-shadow: 0 0 6px #000;
    filter: brightness(0.5);
    position: relative;
  }
  .curr_info {
      position: absolute;
      top: 0.5rem;
      left: 1.7rem;
      color: #fff;
      height: 1.5rem;
      line-height: 1.5rem;  
  }
  //居家
  .curr_midtit {
    width: 30%;
    height: 40px;
    background-color: #fff;
    margin: auto;
    line-height: 40px;
    text-align: center;
    color: #000;
    font-size: 0.18rem;
  }
</style>